import React, { Component } from 'react'
import { message, Modal } from 'antd';
import { Form, Input, Button, Select } from 'antd';
import { getAllRolesAPI } from '../apis/characterAPI';
import { addUserAPI } from '../apis/userAPI';
const { Option } = Select;
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
export default class addCateModal extends Component {

    state = {
        allRoles: []

    }
    getAllRoles = async () => {
        const res = await getAllRolesAPI()
        console.log('getRoles()', res);
        this.setState({
            allRoles: res.data.data
        })
    }
    handleOk = () => {

    };

    handleCancel = () => {
        this.props.showAddModal(false)
    };

    onFinish = async (values) => {

        console.log(values);
        const res = await addUserAPI(values)
        console.log('addUserAPI()', res);
        if (res.data.code) {
            message.success('添加成功')
            this.props.getAllUsers()
        } else {
            message.error('添加失败')
        }

    };
    componentDidMount() {
        this.getAllRoles()
    }

    render() {
        const { allRoles } = this.state
        return (
            <>
                <Modal
                    footer={null}
                    title="添加用户" visible={this.props.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <Form {...layout} name="control-hooks" onFinish={this.onFinish}>
                        <Form.Item
                            name="account"
                            label="账户"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            label="密码"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="email"
                            label="邮箱"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input addonAfter="@email.com" />
                        </Form.Item>
                        <Form.Item
                            name="role"
                            label="角色"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Select
                                placeholder="选择角色"
                                allowClear
                                onChange={this.classChange}
                            >
                                {allRoles.map(r => <Option value={r._id}>{r.name}</Option>)}


                            </Select>
                        </Form.Item>

                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                添加
                            </Button>


                        </Form.Item>
                    </Form>
                </Modal>
            </>
        )
    }
}
